 <!-- 倒计时插件-->

 <template>
      <div class="CountDown" style="text-align: right;text-shadow: 2px 2px 1px #EBEEF5;width: 100%;">
        <div style="border-radius: 5px;background-color: rgba(0,0,0,0.1);width: 250px;margin-left: 75%;height: 40px;text-align:center;line-height: 40px;">请注意考试时间：<span style="font-weight: 700;">&nbsp;&nbsp;{{minute}}:{{second}}</span></div>
      </div>
    </template>

    <script type="text/ecmascript-6">

    export default {
      name: 'CountDown',
      data () {
        return {
          minutes: 10,
          seconds: 10,
          time:0
        }
      },
      props: {
        countTime: {
          type: Object,
          default: () => { }
        },
         fatherMethod: {
                type: Function,
                default: null
              }
      },
      mounted () {
        this.add()
      },
      methods: {
        childMethod() {
                if (this.fatherMethod) {
                  this.fatherMethod();
                }
              },
       //暂停时间
      stoptime(){
         clearInterval(this.time);
      },
        num: function (n) {
          return n < 10 ? '0' + n : '' + n
        },
        add: function () {
          var _this = this
          this.time = window.setInterval(function () {
            if (_this.seconds === 0 && _this.minutes !== 0) {
              _this.seconds = 59
              _this.minutes -= 1
            } else if (_this.minutes === 0 && _this.seconds === 0) {
              _this.seconds = 0
              window.clearInterval(this.time);
            } else {
              _this.seconds -= 1
            }
          }, 1000)
        }
      },
      updated() {
        if(this.minutes ==0 && this.seconds == 1){
            this.$confirm("时间已到，请提交试卷？", "试卷", {
              confirmButtonText: "确定",
              type: "warning",
            }).then((res)=>{
              this.childMethod();
            }).catch((err)=>{
              alert("提交试卷！！！");
              this.childMethod();
            })
        }
      },
      watch: {
        countTime: {
          deep: true,
          immediate: true,
          handler: function (newVal) {
            this.minutes = newVal.minute;
            this.seconds = newVal.second;
          }
        },
        second: {
          handler (newVal) {
            this.num(newVal)
          }
        },
        minute: {
          handler (newVal) {
            this.num(newVal)
          }
        }
      },
      computed: {
        second: function () {
          return this.num(this.seconds)
        },
        minute: function () {
          return this.num(this.minutes)
        }
      }
    }
    </script>
<style>
.CountDown{
      color: #FF0000;
      font-size: 20px;
    }
</style>
